/* 作者： 开发日期： 页面描述： 修改人员：**** 修改日期：**** */
<template>
  <div class="attendance_add">
    <div class="attendance_add_l">
      <div class="item_select_tips">基本信息</div>
      <el-form :model="formData" :rules="rules" ref="ruleForm" size="small" label-width="150px" class="notice_form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请人：" prop="replaceName">
              <div class="color_content">{{ formData.userName }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门名称：">
              <div class="color_content">{{ formData.orgName }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话：" prop="mobile" class="full_width">
              <el-input type="text" v-model="formData.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请时间：">
              <div class="color_content">{{ formData.createTime1 }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="item_select_tips">{{ formTitle }}信息</div>
        <div v-if="formData.formId == '1' || formData.formId == '2' || formData.formId == '3' || formTypes == '3'">
          <el-form-item
            v-if="(formData.formId == '3' || formTypes == '3') && !tabsOne.dailyId && !id"
            label="关联请假单"
            prop="dailyId">
            <el-button size="small" type="primary" @click="linkData()">点击关联</el-button>
          </el-form-item>
          <el-form-item :label="formData.formId == '2' ? '公务外出类型：' : '请假类型：'" prop="leaveId">
            <el-select
              v-model="formData.leaveId"
              @change="changeLeave('0')"
              clearable
              placeholder="请选择"
              size="small"
              v-if="formData.formId !== '3' && formTypes !== '3'">
              <el-option v-for="item in leaveList1" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
            </el-select>
            <el-input
              v-if="formData.formId == '3' || formTypes == '3'"
              v-model="formData.leaveName"
              disabled></el-input>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item
                size="mini"
                v-if="formData.formId !== '2' && leaveIdList.includes(formData.leaveId)"
                :label="formData.formId == '2' ? '预计开始时间：' : '请假开始时间：'"
                prop="startTime">
                <el-date-picker
                  size="small"
                  :popper-append-to-body="false"
                  v-model="days.startDays"
                  type="date"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  :default-value="timeDefaultShow"
                  @change="changeDay(0)"
                  onClick
                  :disabled="formData.formId == '3' || formTypes == '3' || !formData.leaveId"></el-date-picker>
                <span class="add_radio" v-if="formData.leaveId == '5' || formData.leaveId == '24'">
                  <el-radio-group v-model="days.morNing" @change="changeDay(0)">
                    <el-radio label="上午">上午</el-radio>
                    <el-radio label="下午">下午</el-radio>
                  </el-radio-group>
                </span>
              </el-form-item>
              <el-form-item
                v-else
                :label="formData.formId == '2' ? '预计开始时间：' : '请假开始时间：'"
                prop="startTime">
                <el-date-picker
                  size="small"
                  :popper-append-to-body="false"
                  v-model="formData.startTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(0)"
                  :disabled="formData.formId == '3' || formTypes == '3' || !formData.leaveId"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 22丧假,3婚假,4产假,21陪产假,6陪产假,5年休假,25哺乳假-->
              <el-form-item
                size="mini"
                v-if="formData.formId != '2' && leaveIdList.includes(formData.leaveId)"
                :label="formData.formId == '2' ? '预计结束时间：' : '请假结束时间：'"
                prop="endTime">
                <el-date-picker
                  size="small"
                  :popper-append-to-body="false"
                  v-model="days.endDays"
                  type="date"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  :default-value="timeDefaultShow"
                  @change="changeDay(1)"
                  :disabled="formData.formId == '3' || formTypes == '3' || !formData.leaveId"></el-date-picker>
                <span class="add_radio" v-if="formData.leaveId == '5' || formData.leaveId == '24'">
                  <el-radio-group size="mini" v-model="days.afterNoon" @change="changeDay(1)">
                    <el-radio label="上午">上午</el-radio>
                    <el-radio label="下午">下午</el-radio>
                  </el-radio-group>
                </span>
              </el-form-item>
              <el-form-item v-else :label="formData.formId == '2' ? '预计结束时间：' : '请假结束时间：'" prop="endTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(0)"
                  :disabled="formData.formId == '3' || formTypes == '3' || !formData.leaveId"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="formData.formId != '2' && formData.leaveId == '25'">
            <el-col :span="24">
              <el-form-item label="请假区间：">
                <span class="add_radio">
                  <el-radio-group size="mini" v-model="days.nurseTime" @change="changeDay(2)">
                    <el-radio label="上午">上班后一小时</el-radio>
                    <el-radio label="下午">下班前一小时</el-radio>
                  </el-radio-group>
                </span>
                <span class="add_tips">提示：“哺乳假”系统默认无需销假，您也可自行选择销假。</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="formData.formId == '2' ? '外出小时数：' : '请假小时数：'">
                <div class="color_content">{{ formData.regHours || 0 }}小时</div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="formData.formId == '2' ? '外出天数：' : '请假天数：'">
                <div class="color_content">
                  工作日{{ formData.regDays || 0 }}天
                  <span v-if="formData.calendarDays != '0'">， 日历日{{ formData.calendarDays || 0 }}天</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item :label="formData.formId == '2' ? '外出事由：' : '请假事由：'" prop="reason">
            <el-input
              :disabled="formData.formId == '3' || formTypes == '3'"
              type="textarea"
              v-model="formData.reason"
              :rows="2"
              placeholder="请输入"
              :autosize="{ minRows: 2, maxRows: 100 }"
              maxlength="100"
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item v-if="formData.formId == '3' || formTypes == '3'" label="请假附件：">
            <UploadPreview class="att_file" :file-list="formData.enclosureList || []" layout="list"></UploadPreview>
          </el-form-item>
          <el-form-item v-if="formData.formId == '3' || formTypes == '3'" label="销假时间：" prop="backTime">
            <el-date-picker
              size="mini"
              :popper-append-to-body="false"
              v-model="formData.backTime"
              :disabled="!formData.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm"
              format="yyyy-MM-dd HH:mm"
              :default-time="timeDefaultShow1"
              :default-value="timeDefaultShow"
              @change="backChange"></el-date-picker>
          </el-form-item>
          <el-form-item v-if="formData.formId == '3' || formTypes == '3'" label="" prop="">
            <p style="line-height: 1.5">提示：</p>
            <p style="line-height: 1.5">1.用于请假结束后，告知负责人已返岗。(销假时间大于请假结束时间)</p>
            <p style="line-height: 1.5">
              2.用于在请假时间内已返岗，需要对请假时间进行调整。(销假时间大于开始时间小于结束时间)
            </p>
          </el-form-item>
          <el-form-item
            label="附件："
            v-if="formData.formId == '3' || formTypes == '3'"
            key="2"
            :rules="
              formData.formId == '3' && formData.leaveId == '2' && formData.isForceEnclosure === '1'
                ? rules.enclosureList
                : [{ required: false }]
            "
            prop="backEnclosureList">
            <UploadFile :file-list="formData.backEnclosureList" titleAdd="">
              <div class="file_tips" slot="other" v-if="formData.leaveId == '2'">
                <div class="tip_li">提示：请上传病例证明或在备注中说明</div>
              </div>
            </UploadFile>
          </el-form-item>
          <el-form-item label="附件：" v-else key="2-1">
            <UploadFile :file-list="formData.enclosureList" titleAdd="">
              <div class="file_tips" slot="other" v-if="formData.formId != '2' && formData.leaveId == '2'">
                <div class="tip_li" v-if="formData.formId == '1'">提示：请上传或在销假时上传相关病例证明文件</div>
                <div class="tip_li" v-if="formData.formId == '3'">提示：请上传病例证明或在备注中说明</div>
              </div>
            </UploadFile>
          </el-form-item>

          <el-row v-if="formData.formId !== '3' && formTypes !== '3'">
            <el-col :span="12">
              <el-form-item label="顶岗人员姓名：" prop="replaceName">
                <el-input :disabled="formData.formId == '3'" v-model="formData.replaceName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话：">
                <el-input :disabled="formData.formId == '3'" type="text" v-model="formData.replaceMobile"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item v-if="formData.formId !== '3' && formTypes !== '3'" label="备注：" prop="extentName">
            <el-radio v-model="formData.remark1" label="出市">出市</el-radio>
            <el-radio v-model="formData.remark1" label="出国">出国</el-radio>
            <el-radio v-model="formData.remark1" label="其他">其他</el-radio>
            <el-input
              v-if="formData.remark1 == '其他'"
              type="textarea"
              v-model="formData.extentName"
              :rows="2"
              :autosize="{ minRows: 2, maxRows: 100 }"
              maxlength="100"
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item v-if="formData.formId == '3' || formTypes == '3'" label="备注：" prop="remark">
            <el-input
              type="textarea"
              v-model="formData.remark"
              :rows="2"
              :autosize="{ minRows: 2, maxRows: 100 }"
              maxlength="100"
              show-word-limit></el-input>
          </el-form-item>
        </div>
        <div v-else-if="formData.formId == '4'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="加班开始时间：" prop="startOverTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.startOverTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(1)"
                  :disabled="formData.formId == '3'"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="加班结束时间：" prop="endOverTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.endOverTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(1)"
                  :disabled="formData.formId == '3'"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="加班小时数：" prop="startTime">
            <div class="color_content">{{ formData.overHours || 0 }}小时</div>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="抵扣考勤开始时间：" prop="startTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.startTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(0)"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="抵扣考勤结束时间：" prop="endTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(0)"
                  :disabled="formData.formId == '3'"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="工作事由：" prop="reason">
            <el-input
              type="textarea"
              v-model="formData.reason"
              :rows="2"
              :autosize="{ minRows: 2, maxRows: 100 }"
              maxlength="100"
              show-word-limit></el-input>
          </el-form-item>
        </div>
        <div v-else-if="formData.formId == '5'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="补卡日期：" prop="startTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  :default-value="timeDefaultShow"
                  @change="changeTime(0)"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="补卡类型：" prop="leaveId">
                <el-select v-model="formData.leaveId" clearable placeholder="请选择类型" size="small">
                  <el-option
                    v-for="item in leaveList1"
                    :key="item.id"
                    :label="item.typeName"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="补卡时间：" prop="selfTime">
                <span class="add_radio">
                  <el-radio-group size="mini" v-model="formData.selfTime" @change="changeDay(3)">
                    <el-radio :label="workTime[0]">{{ workTime[0] }}</el-radio>
                    <el-radio :label="workTime[1]">{{ workTime[1] }}</el-radio>
                    <el-radio label="self">自定义</el-radio>
                    <el-time-picker
                      size="mini"
                      :popper-append-to-body="false"
                      v-model="days.selfTime"
                      value-format="HH:mm"
                      format="HH:mm"
                      @change="changeTime(0)"
                      placeholder="请选择补卡时间"
                      v-if="formData.selfTime === 'self'"></el-time-picker>
                  </el-radio-group>
                </span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="补卡原因" prop="reason">
            <!-- :rules="[{ required: true, message: '原因不能为空', trigger: 'blur' }]" -->
            <el-input
              :disabled="formTypes == '3'"
              type="textarea"
              v-model="formData.reason"
              :rows="2"
              placeholder="请输入"
              :autosize="{ minRows: 2, maxRows: 100 }"
              maxlength="100"
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input
              type="textarea"
              v-model="formData.remark"
              :rows="2"
              :autosize="{ minRows: 2, maxRows: 100 }"
              maxlength="100"
              show-word-limit></el-input>
          </el-form-item>
        </div>
        <div v-else-if="formData.formId == '6'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="加班时间：" prop="startOverTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.startOverTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(1)"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="至：" prop="endOverTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.endOverTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(1)"
                  :disabled="formData.formId == '3'"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="调休时间：" prop="startTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.startTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(0)"
                  :disabled="formData.formId == '3'"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="至：" prop="endTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(0)"
                  :disabled="formData.formId == '3'"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="调休事由：" prop="reason">
            <el-input
              type="textarea"
              v-model="formData.reason"
              :rows="2"
              :autosize="{ minRows: 2, maxRows: 100 }"
              maxlength="100"
              show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="附件：">
            <UploadFile :file-list="formData.enclosureList"></UploadFile>
          </el-form-item>
        </div>
        <div v-else-if="formData.formId == '7'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="出行范围：" prop="remark1">
                <el-radio v-model="formData.remark1" label="出市">出市</el-radio>
                <el-radio v-model="formData.remark1" label="出省">出省</el-radio>
                <el-radio v-model="formData.remark1" label="出国">出国</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原单位是否同意：" prop="isOrganAgree">
                <el-radio v-model="formData.isOrganAgree" label="1">是</el-radio>
                <el-radio v-model="formData.isOrganAgree" label="0">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出行目的地：" prop="outDest">
                <el-input type="text" v-model="formData.outDest" maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否中高风险区：" prop="isRiskZone">
                <el-radio v-model="formData.isRiskZone" label="1">是</el-radio>
                <el-radio v-model="formData.isRiskZone" label="0">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="出行时间：" prop="startTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.startTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(0)"
                  :disabled="formData.formId == '3'"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="返回时间：" prop="endTime">
                <el-date-picker
                  size="mini"
                  :popper-append-to-body="false"
                  v-model="formData.endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
                  :default-time="timeDefaultShow1"
                  :default-value="timeDefaultShow"
                  @change="changeTime(0)"
                  :disabled="formData.formId == '3'"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="出行天数：">
            <div class="color_content">{{ formData.regDays || 0 }}天</div>
          </el-form-item>
          <el-form-item label="附件：" prop="enclosureList">
            <UploadFile :file-list="formData.enclosureList"></UploadFile>
          </el-form-item>
        </div>

        <div class="btn_save" v-if="!id || formTypes == '3'">
          <el-button @click="cancel" size="small">取 消</el-button>
          <el-button size="small" type="primary" @click="setData('ruleForm', 2)">提 交</el-button>
        </div>
        <div class="btn_save" v-else-if="id && staticsShow == '1'">
          <el-button @click="back" size="small">取 消</el-button>
          <el-button size="small" type="primary" @click="setData('ruleForm', 4)">提 交</el-button>
        </div>
      </el-form>
    </div>
    <!-- <div class="attendance_add_r" v-if="!id">
      <div class="add_r_title">
        审批流程
      </div>
      <AttendSteps ref ='refsFlow' />
    </div> -->

    <!-- 新建 start -->
    <XnDialog
      title="关联请假单"
      :visible.sync="linkDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="74%"
      class="branch_dialog"
      append-to-body
      @close="linkDiaShow = false">
      <AttendanceLink v-if="linkDiaShow" @linkSuccess="linkSuccess" @cancelLink="cancelLink" />
    </XnDialog>
  </div>
</template>

<script>
import {
  listAttendanceLeaveType,
  addAttendanceDaily,
  getValidByTimeZone,
  getRegInfo,
  updateAttendanceDaily,
  getAttendanceDailyInfo,
  getAttendanceRoleAndStandard,
} from '@apis/api-attendance.js'
import moment from 'moment'
import AttendanceLink from './AttendanceLink'
import UploadFile from '@com/UploadFile'
import XnDialog from '@com/xnDialog.vue'
import UploadPreview from '@com/UploadPreview/index.vue'
import { phoneReg } from '@utility/regExps.js'
export default {
  components: {
    UploadFile,
    AttendanceLink,
    UploadPreview,
    XnDialog,
  },
  props: {
    id: {
      type: String,
      default: '',
    },
    staticsShow: {
      type: String,
      default: '',
    },
    tabsOne: {
      type: Object,
      default() {
        return {}
      },
    },
    oneItem: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    // 手机号验证
    const checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号码不能为空'))
      }
      setTimeout(() => {
        if (!/^\d+$/.test(value)) {
          callback(new Error('手机号码必须为数字值'))
        } else {
          if (!phoneReg.test(value)) {
            callback(new Error('请输入正确的手机号码'))
          } else {
            callback()
          }
        }
      }, 100)
    }
    const placeMobile = (rule, value, callback) => {
      setTimeout(() => {
        if (value && !/^\d+$/.test(value)) {
          callback(new Error('手机号码必须为数字值'))
        } else {
          if (value && !phoneReg.test(value)) {
            callback(new Error('请输入正确的手机号码'))
          } else {
            callback()
          }
        }
      }, 100)
    }
    const checkID = (rule, value, callback) => {
      if (this.formData.dailyId) {
        callback()
      } else {
        callback(new Error('请关联请假单'))
      }
    }
    const validFile = (rule, value, callback) => {
      if (value && value.length > 0) {
        callback()
      } else {
        callback(new Error('请上传附件'))
      }
    }
    return {
      formTitle: '',
      moment: moment,
      timeDefaultShow: new Date(),
      timeDefaultShow1: moment().format('HH:mm:ss'),
      formData: {
        dailyId: '',
        createTime1: moment().format('YYYY-MM-DD HH:mm'),
        userName: JSON.parse(localStorage.PSKH_USERINFO).userName,
        orgName: JSON.parse(localStorage.PSKH_USERINFO).loginPostInfo.orgName,
        mobile: '',
        leaveId: '',
        remark1: '',
        remark: '',
        startTime: '',
        endTime: '',
        reason: '',
        replaceName: '',
        replaceMobile: '',
        enclosureList: [],
        regDays: 0,
        regHours: 0,
        calendarDays: '0',
        regStatus: '',
        extentName: '',
        extentType: '',
        startOverTime: '',
        endOverTime: '',
        backTime: '',
        overHours: '',
        isOrganAgree: '',
        outDest: '',
        isRiskZone: '',
        selfTime: '',
        backEnclosureList: [],
      },
      rules: {
        mobile: [{ required: true, validator: checkPhone, trigger: 'blur' }],
        leaveId: [{ required: true, message: '类型不能为空', trigger: 'change' }],
        reason: [{ required: true, message: '事由/原因不能为空', trigger: 'blur' }],
        replaceMobile: [{ required: true, validator: placeMobile, trigger: 'blur' }],
        startTime: [{ required: true, message: '时间不能为空', trigger: 'change' }],
        endTime: [{ required: true, message: '时间不能为空', trigger: 'change' }],
        backTime: [{ required: true, message: '时间不能为空', trigger: 'change' }],
        startOverTime: [{ required: true, message: '时间不能为空', trigger: 'change' }],
        endOverTime: [{ required: true, message: '时间不能为空', trigger: 'change' }],
        dailyId: [{ required: true, validator: checkID, trigger: 'change' }],
        isOrganAgree: [{ required: true, message: '必选项', trigger: 'change' }],
        outDest: [{ required: true, message: '目的地不能为空', trigger: 'blur' }],
        isRiskZone: [{ required: true, message: '必选项', trigger: 'change' }],
        remark1: [{ required: true, message: '必选项', trigger: 'change' }],
        enclosureList: [{ required: true, validator: validFile, trigger: 'change' }],
        selfTime: [{ required: true, message: '时间不能为空', trigger: 'change' }],
      },
      leaveList1: [],
      turn: {
        day: 0,
        hour: 0,
      },
      activeSelect: 1,
      linkDiaShow: false,
      days: {
        startDays: '',
        endDays: '',
        morNing: '上午',
        afterNoon: '下午',
        nurseTime: '上午',
        selfTime: '',
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '上午',
            onClick(picker) {
              const date = moment(picker.visibleTime).format('YYYY-MM-DD 08:00:00')
              picker.$emit('pick', date)
            },
          },
          {
            text: '下午',
            onClick(picker) {
              const date = moment(picker.visibleTime).format('YYYY-MM-DD 13:00:00')
              picker.$emit('pick', date)
            },
          },
        ],
      },
      formTypes: '', // 是否为销假，3为销假类型
      showFile: '1',
      mesTips: '您确定要提交表单吗？',
      tipsDisShow: false,
      warnTip: '（工作时间内请假、公务外出的，请于离岗前、返回岗位后在考勤机打卡）',
      dialogType: '',
      workTime: [],
      workId: '0', // 0机关1窗口
      leaveIdList: ['3', '4', '5', '6', '21', '22', '24', '25', '29'], // <!-- 22丧假,3婚假,4产假,21陪产假,6陪产假,5年休假,25哺乳假,24育儿假,29独生子女护理假-->
    }
  },
  created() {
    this.formData.formId = this.tabsOne.id
    if (this.formData.formId === '5' || this.formData.formId === '1') {
      this.getAttendanceRoleAndStandard()
    }
    if (this.tabsOne.id !== '4' && this.tabsOne.id !== '7') {
      this.formTitle = this.tabsOne.formName.substring(0, this.tabsOne.formName.length - 1)
    } else {
      this.formTitle = this.tabsOne.formName
    }
  },
  mounted() {
    this.dealAudit()
    // this.pickerOptions.shortcuts = [{
    //   text: '上午',
    //   onClick(picker) {
    //     let date = moment(picker.visibleTime).format('YYYY-MM-DD 08:00:00')
    //     picker.$emit('pick', date);
    //   }
    // }, {
    //   text: '下午',
    //   onClick(picker) {
    //     let date = moment(picker.visibleTime).format('YYYY-MM-DD 13:00:00')
    //     picker.$emit('pick', date);
    //   }
    // }]
  },
  methods: {
    dealAudit() {
      this.listLeaveType()
      if (this.id) {
        this.getDetail(this.id)
      } else {
        // 是否是一键关联销假
        if (this.tabsOne.dailyId) {
          this.formData.id = this.tabsOne.dailyId
          this.formData.formId = this.tabsOne.formId
          this.formTypes = '3'
          setTimeout(() => {
            this.getDetail(this.tabsOne.dailyId)
          }, 100)
        } else {
          this.getRegInfo()
        }
      }
    },
    changeLeave(status) {
      this.formData.startTime = ''
      this.formData.endTime = ''
      this.days.startDays = ''
      this.days.endDays = ''
      this.formData.regDays = '0'
      this.formData.regHours = '0'
      this.formData.calendarDays = '0'
    },
    changeTime(status) {
      if (status === 0) {
        if (this.formData.endTime && this.formData.startTime && this.formData.formId !== '5') {
          this.checkAttendanceTime(status)
        } else if (this.formData.startTime && this.days.selfTime && this.formData.formId === '5') {
          this.checkAttendanceTime(status)
        } else {
          this.formData.regDays = '0'
          this.formData.regHours = '0'
          this.formData.calendarDays = '0'
        }
      } else if (status === 1) {
        if (this.formData.endOverTime && this.formData.startOverTime) {
          this.checkAttendanceTime(status)
        } else {
          this.formData.regDays = '0'
          this.formData.regHours = '0'
          this.formData.calendarDays = '0'
        }
      }
    },
    changeDay(statu) {
      const status = this.formData.leaveId === '25' ? 2 : statu
      if (status === 0 && this.days.startDays) {
        if (this.formData.leaveId === '5' || this.formData.leaveId === '24') {
          if (this.days.morNing === '上午') {
            this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 08:00:00')
          } else if (this.days.morNing === '下午') {
            this.formData.startTime =
              this.workId === '0'
                ? moment(this.days.startDays).format('YYYY-MM-DD 12:00:00')
                : moment(this.days.startDays).format('YYYY-MM-DD 13:00:00')
          }
        } else {
          this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 08:00:00')
        }
      } else if (status === 1 && this.days.endDays) {
        if (this.formData.leaveId === '5' || this.formData.leaveId === '24') {
          if (this.days.afterNoon === '上午') {
            this.formData.endTime =
              this.workId === '0'
                ? moment(this.days.endDays).format('YYYY-MM-DD 12:00:00')
                : moment(this.days.endDays).format('YYYY-MM-DD 13:00:00')
          } else if (this.days.afterNoon === '下午') {
            this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 18:00:00')
          }
        } else {
          this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 18:00:00')
        }
      } else if (status === 2) {
        if (this.days.nurseTime === '上午') {
          if (this.days.startDays) {
            this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 08:00:00')
          }
          if (this.days.endDays) {
            this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 09:00:00')
          }
        } else if (this.days.nurseTime === '下午') {
          if (this.days.startDays) {
            this.formData.startTime = moment(this.days.startDays).format('YYYY-MM-DD 17:00:00')
          }
          if (this.days.endDays) {
            this.formData.endTime = moment(this.days.endDays).format('YYYY-MM-DD 18:00:00')
          }
        }
      }
      if (status === 3) {
        if (this.formData.selfTime === this.workTime[0]) {
          this.days.selfTime = this.workTime[0]
        } else if (this.formData.selfTime === this.workTime[1]) {
          this.days.selfTime = this.workTime[1]
        } else if (this.formData.selfTime === 'self') {
          this.days.selfTime = moment().format('HH:mm')
        }
        if (this.days.selfTime && this.formData.startTime) {
          this.checkAttendanceTime(0)
        }
      } else {
        if (this.formData.endTime && this.formData.startTime) {
          this.checkAttendanceTime(0)
        }
      }
    },

    backChange() {
      if (moment(this.formData.backTime).diff(moment(this.formData.startTime), 'minutes') <= 0) {
        this.$message({
          message: '销假时间必须大于请假开始时间',
          type: 'warning',
        })
        this.formData.backTime = ''
      }
    },

    checkTimeSpan() {
      if (this.formData.endTime && this.formData.startTime) {
        if (moment(this.formData.endTime).diff(moment(this.formData.startTime), 'minutes') <= 0) {
          this.$message({
            message: '结束时间必须大于开始时间',
            type: 'warning',
          })
          this.formData.endTime = ''
        }
      }
    },

    checkAttendanceTime(status) {
      // status ,4、5是更新，2是新增
      let endTime = ''
      let startTime = ''
      let formType = ''
      if (status === 0 || status === 2 || status === 4) {
        if (this.formData.formId === '5') {
          startTime = moment(this.formData.startTime).format('YYYY-MM-DD') + ' ' + this.days.selfTime + ':00'
          endTime = ''
        } else {
          endTime = moment(this.formData.endTime).format('YYYY-MM-DD HH:mm:ss')
          startTime = moment(this.formData.startTime).format('YYYY-MM-DD HH:mm:ss')
        }
        formType = this.formData.formId
      } else if (status === 1 || status === 3 || status === 5) {
        endTime = moment(this.formData.endOverTime).format('YYYY-MM-DD HH:mm:ss')
        startTime = moment(this.formData.startOverTime).format('YYYY-MM-DD HH:mm:ss')
        formType = '0'
      }
      getValidByTimeZone({
        id: this.formData.id || '',
        endTime: endTime,
        leaveType: this.formData.leaveId,
        formType: formType,
        startTime: startTime,
        overTimeHours: this.formData.overHours,
      }).then(res => {
        if (res.data.tips === 606) {
          this.$alert(res.message, '', {
            confirmButtonText: '确定',
            callback: action => {},
          })
        } else {
          if (res.status !== 200) return
          this.$nextTick(() => {
            if (status === 1) {
              this.formData.overHours = res.data.hours
              this.formData.regStatus = res.data.regStatus
              this.formData.calendarDays = res.data.calendarDays
            } else {
              this.formData.regDays = res.data.days
              this.formData.regHours = res.data.hours
              this.formData.regStatus = res.data.regStatus
              this.formData.calendarDays = res.data.calendarDays
            }
          })
          if (status === 2) {
            if (this.formData.formId === 1 || this.formData.formId === 2) {
              this.dialogType = 'add'
              this.tipsDisShow = true
            } else {
              this.submitData()
            }
          } else if (status === 3) {
            this.checkAttendanceTime(2)
          } else if (status === 5) {
            this.checkAttendanceTime(4)
          } else if (status === 4) {
            this.updateData(status)
          }
        }
      })
    },
    getDetail(id) {
      getAttendanceDailyInfo({
        id: id,
        formId: this.formData.formId,
      }).then(res => {
        const data = res.data
        if (this.formData.formId === 5) {
          const arr = data.startTime.split(' ')
          data.startTime = arr[0]
          const selfTime = arr[1]
          this.days.selfTime = selfTime.slice(0, 5)
          if (this.workTime.includes(selfTime.slice(0, 5))) {
            data.selfTime = selfTime.slice(0, 5)
          } else {
            data.selfTime = 'self'
          }
        }
        let backData = {}
        if (this.formData.formId === '3') {
          backData = {
            enclosureList: data.leaveEnclosureList,
            backEnclosureList: data.enclosureList,
          }
        }
        this.formData = Object.assign(this.formData, { ...data }, { ...backData })
        this.formData.createTime1 = this.formData.createTime
        this.formData.userName = this.formData.createBy
        if (this.formData.extentName) {
          if (
            this.formData.extentName === '出市' ||
            this.formData.extentName === '出省' ||
            this.formData.extentName === '出国'
          ) {
            this.$set(this.formData, 'remark1', this.formData.extentName)
            this.$set(this.formData, 'extentName', '')
          } else {
            this.$set(this.formData, 'remark1', '其他')
          }
        }
        if (
          (this.formData.formId === '1' || this.formData.formId === '3') &&
          this.leaveIdList.includes(this.formData.leaveId)
        ) {
          this.days.startDays = moment(this.formData.startTime).format('YYYY-MM-DD')
          this.days.endDays = moment(this.formData.endTime).format('YYYY-MM-DD')
          if (this.formData.leaveId === '5' || this.formData.leaveId === '24') {
            if (moment(this.formData.startTime).format('HH:mm:ss') === '08:00:00') {
              this.days.morNing = '上午'
            } else if (
              moment(this.formData.startTime).format('HH:mm:ss') === '12:00:00' ||
              moment(this.formData.startTime).format('HH:mm:ss') === '13:00:00'
            ) {
              this.days.morNing = '下午'
            }
            if (
              moment(this.formData.endTime).format('HH:mm:ss') === '12:00:00' ||
              moment(this.formData.endTime).format('HH:mm:ss') === '13:00:00'
            ) {
              this.days.afterNoon = '上午'
            } else if (moment(this.formData.endTime).format('HH:mm:ss') === '18:00:00') {
              this.days.afterNoon = '下午'
            }
          }
          if (this.formData.leaveId === '25') {
            if (moment(this.formData.startTime).format('HH:mm:ss') === '08:00:00') {
              this.days.nurseTime = '上午'
            } else if (moment(this.formData.startTime).format('HH:mm:ss') === '17:00:00') {
              this.days.nurseTime = '下午'
            }
          }
        }
        if (this.formTypes === '3') {
          this.formData.formId = '3'
          this.formData.dailyId = id
          // if (this.id) {
          //   this.formTypes = ''
          //   this.formData.id = this.id
          // }
        }
      })
    },
    getRegInfo() {
      getRegInfo({}).then(res => {
        this.formData.mobile = res.data.phone
      })
    },
    listLeaveType() {
      listAttendanceLeaveType({
        formTypeId: this.formData.formId,
        leaveType: '1',
      }).then(res => {
        this.$nextTick(() => {
          this.leaveList1 = res.data || []
        })
      })
    },
    cancel() {
      this.$emit('cancelData', true)
    },
    /* 处理数据 */
    setData(formName, status) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.formData.startTime = this.formData.startTime
            ? moment(this.formData.startTime).format('YYYY-MM-DD HH:mm:ss')
            : ''
          this.formData.endTime = this.formData.endTime
            ? moment(this.formData.endTime).format('YYYY-MM-DD HH:mm:ss')
            : ''
          this.formData.startOverTime = this.formData.startOverTime
            ? moment(this.formData.startOverTime).format('YYYY-MM-DD HH:mm:ss')
            : ''
          this.formData.endOverTime = this.formData.endOverTime
            ? moment(this.formData.endOverTime).format('YYYY-MM-DD HH:mm:ss')
            : ''
          this.formData.backTime = this.formData.backTime
            ? moment(this.formData.backTime).format('YYYY-MM-DD HH:mm:ss')
            : ''
          if (
            this.formData.remark1 === '出市' ||
            this.formData.remark1 === '出省' ||
            this.formData.remark1 === '出国'
          ) {
            this.formData.extentName = this.formData.remark1
            this.formData.extentType =
              this.formData.remark1 === '出市' ? '1' : this.formData.remark1 === '出省' ? '0' : '2'
          } else {
            this.formData.extentType = '3'
          }
          if (
            this.formData.formId === '1' ||
            this.formData.formId === '2' ||
            this.formData.formId === '5' ||
            this.formData.formId === '7'
          ) {
            this.checkAttendanceTime(status)
          } else if ((this.formData.formId === '4' || this.formData.formId === '6') && status === 2) {
            this.checkAttendanceTime(3)
          } else if ((this.formData.formId === '4' || this.formData.formId === '6') && status === 4) {
            this.checkAttendanceTime(5)
          } else if (this.formTypes !== '3' && this.formData.formId === '3') {
            this.updateData(status)
          } else {
            this.submitData()
          }
        } else {
          return false
        }
      })
    },

    submitData() {
      this.$confirm('您确定要提交表单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          if (this.formData.formId === 5) {
            this.formData.startTime =
              moment(this.formData.startTime).format('YYYY-MM-DD') + ' ' + this.days.selfTime + ':00'
            this.formData.endTime = ''
          }
          let params = {}
          if (this.formData.formId === '3' || this.formTypes === '3') {
            const data = {
              enclosureList: this.formData.backEnclosureList,
              leaveEnclosureList: this.formData.enclosureList,
            }
            params = Object.assign({ ...this.formData }, { ...data })
          } else {
            params = { ...this.formData }
          }
          addAttendanceDaily({
            ...params,
          }).then(res => {
            if (res.status === 200) {
              this.$message({
                message: '提交成功',
                type: 'success',
              })
              setTimeout(() => {
                this.$emit('addSuccess', true)
              }, 300)
            }
          })
        })
        .catch(() => {})
    },
    // 返回
    back() {
      this.$emit('backReturn', 1)
    },
    // 编辑
    updateData(status) {
      if ((this.formData.formId === 1 || this.formData.formId === 2) && status === 4) {
        this.dialogType = 'update'
        this.tipsDisShow = true
      } else {
        this.formData.processInstanceId = this.oneItem.processInstanceId
        this.formData.taskId = this.oneItem.taskId || 'b422e3b94c2c11ecad2a3cf011b776d5'
        if (this.formData.formId === 5) {
          this.formData.startTime =
            moment(this.formData.startTime).format('YYYY-MM-DD') + ' ' + this.days.selfTime + ':00'
          this.formData.endTime = ''
        }
        let params = {}
        if (this.formData.formId === '3' || this.formTypes === '3') {
          const data = {
            enclosureList: this.formData.backEnclosureList,
            leaveEnclosureList: this.formData.enclosureList,
          }
          params = Object.assign({ ...this.formData }, { ...data })
        } else {
          params = { ...this.formData }
        }
        updateAttendanceDaily({
          ...params,
        }).then(res => {
          if (res.status === 200) {
            this.$message({
              message: '编辑成功',
              type: 'success',
            })
            if (status === 4) {
              setTimeout(() => {
                this.$emit('backReturn', 2)
              }, 1000)
            } else {
              setTimeout(() => {
                this.$emit('addSuccess', true)
              }, 1000)
            }
          }
        })
      }
    },

    // 点击关联
    linkData() {
      this.linkDiaShow = true
    },

    cancelLink() {
      this.linkDiaShow = false
    },
    linkSuccess(dataLink) {
      this.linkDiaShow = false
      this.formData.id = dataLink.dailyId
      this.formData.formId = dataLink.formId
      this.formTypes = '3'
      this.listLeaveType()
      setTimeout(() => {
        this.getDetail(dataLink.dailyId)
      }, 100)
    },
    closeDialog(data) {
      if (data === 1) {
        if (this.dialogType === 'update') {
          this.formData.processInstanceId = this.oneItem.processInstanceId
          this.formData.taskId = this.oneItem.taskId || 'b422e3b94c2c11ecad2a3cf011b776d5'
          updateAttendanceDaily({
            ...this.formData,
          }).then(res => {
            if (res.status === 200) {
              this.$message({
                message: '编辑成功',
                type: 'success',
              })
              setTimeout(() => {
                this.dialogType = ''
                this.$emit('backReturn', 2)
              }, 1000)
            }
          })
        } else {
          addAttendanceDaily({
            ...this.formData,
          }).then(res => {
            if (res.status === 200) {
              this.$message({
                message: '提交成功',
                type: 'success',
              })
              setTimeout(() => {
                this.$emit('addSuccess', true)
              }, 1000)
            }
          })
        }
      }
      this.tipsDisShow = false
    },
    getAttendanceRoleAndStandard() {
      getAttendanceRoleAndStandard({}).then(res => {
        const data = res.data.attendanceStandard
        this.workTime = data.split('-')
        if (data.indexOf('08:00') !== -1) {
          this.workId = '0'
        } else {
          this.workId = '1'
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.attendance_add {
  width: 100%;
  height: 100%;
  // margin: 0 auto;
  // overflow-y: auto;
  display: flex;
  font-size: 14px;
  .file_tips {
    margin-left: 10px;
  }
  .add_radio {
    border: 1px solid #dcdfe6;
    border-radius: 3px;
    padding: 0px 10px 2px 10px;
    display: inline-block;
  }
  .attendance_add_l {
    flex: 1;
    padding: 0 10px;
  }
  .attendance_add_r {
    border-left: 2px solid #ececec;
    width: 300px;
    padding: 0 10px;
    // height: 100%;
    .add_r_title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .el-steps {
      height: 90%;
    }
    .attend_step {
      .icon_step_r {
        color: #67c23a;
        // position: absolute;
      }
      .title_step {
        display: flex;
        justify-content: space-between;
        color: #333;
      }
      .title_step_time {
        color: #909399;
      }
      .c_normal {
        color: #333;
      }
      .des_name {
        color: #3863a3;
      }
    }
  }
  .item_select_tips {
    margin-bottom: 10px;
    padding-left: 10px;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    border-left: 3px solid #a40002;
  }
  .tips {
    font-size: 14px;
    color: #8f939a;
  }
  .color_content {
    color: #909399;
  }
  .attendance_add_infor1 {
    display: flex;
    margin-left: 10px;
    p {
      width: 50%;
      margin-bottom: 6px;
      span {
        color: #909399;
      }
    }
  }
  .attendance_add_infor2 {
    display: flex;
    width: 50%;
    align-items: center;
    .el-input {
      width: 70%;
    }
  }
  .notice_form {
    .el-radio {
      margin-right: 10px;
    }
    /deep/.el-input__inner {
      border: 1px solid #dcdfe6;
    }
  }
  .attendance_add_main {
    border: 1px solid #e9e9e9;
  }
  .btn_save {
    margin-top: 10px;
    text-align: center;
    padding-bottom: 10px;
  }
  .add_tips {
    color: #909399;
    margin-left: 10px;
  }
}
</style>
